<template>
  <view
    :style="'direction:' + $t('dir')"
    :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'"
  >
    <navbar :title="$t('يوللاش')" :back="false" />

    <view class="main">
      <view class="grid dir-ltr">
        <view class="toast"> يوللىماقچى بولغان ئۇچۇرنىڭ تۈرىنى تاللاڭ </view>
        <u-grid :border="true" @click="clickGrid" col="3">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
      </view>
    </view>

    <!-- 底部导航栏 -->
    <tabbar
      :activeTab="2"
      :unreadCount="unreadCount"
      :unreadNoticeCount="unreadNoticeCount"
      :showHideRegion="false"
    />
    <!-- u-popup1 -->
    <u-popup
      :safeAreaInsetBottom="false"
      :round="10"
      mode="center"
      :show="show1"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid1" col="3">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList1"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>

            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup2 -->
    <u-popup
      :safeAreaInsetBottom="false"
      :round="10"
      mode="center"
      :show="show2"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid2" col="4">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList2"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>

            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup3 kuruh -->
    <!-- u-popup4 -->
    <u-popup
      :round="10"
      :safeAreaInsetBottom="false"
      mode="center"
      :show="show4"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid4" col="4">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList4"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup5 -->
    <u-popup
      :safeAreaInsetBottom="false"
      :round="10"
      mode="center"
      :show="show5"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid5" col="4">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList5"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup6 -->
    <u-popup
      :round="10"
      :safeAreaInsetBottom="false"
      mode="center"
      :show="show6"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid6" col="3">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList6"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup7 -->
    <u-popup
      :round="10"
      :safeAreaInsetBottom="false"
      mode="center"
      :show="show7"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid7" col="2">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList7"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup8-->
    <u-popup
      :round="10"
      :safeAreaInsetBottom="false"
      mode="center"
      :show="show8"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid8" col="4">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList8"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup9 -->
    <u-popup
      :round="10"
      :safeAreaInsetBottom="false"
      mode="center"
      :show="show9"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid9" col="3">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList9"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup10 -->
    <u-popup
      :round="10"
      :safeAreaInsetBottom="false"
      mode="center"
      :show="show10"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid10" col="2">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList10"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
    <!-- u-popup11 kuruh-->
    <!-- u-popup12 -->
    <u-popup
      :round="10"
      :safeAreaInsetBottom="false"
      mode="center"
      :show="show12"
      @close="close"
    >
      <view class="tab">
        <u-grid :border="false" @click="clickGrid12" col="3">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList12"
            :key="baseListIndex"
          >
            <u--image
              :showLoading="true"
              :src="baseListItem.src"
              width="80rpx"
              height="80rpx"
            ></u--image>
            <text class="grid-text">{{
              $t("dir") == "rtl" ? baseListItem.title : baseListItem.titleCn
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: null,
      subid: null,
      show1: false,
      show2: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      show9: false,
      show10: false,
      show11: false,
      show12: false,
      baseList: [
        {
          src: "/static/images/grid/店铺.png",
          titleCn: "店铺",
          title: "دۇكان-ساراي",
          id: 1,
        },
        {
          src: "/static/images/grid/招员工.png",
          titleCn: "找工作",
          title: "خىزمەتلەر",
          id: 2,
        },
        {
          src: "/static/images/grid/找工作.png",
          titleCn: "招员工",
          title: "خىزمەتچىلەر",
          id: 3,
        },
        {
          src: "/static/images/grid/综合信息.png",
          titleCn: "综合信息",
          title: "ئونۋېرسال ئۇچۇر",
          id: 4,
        },
        {
          src: "/static/images/grid/房产.png",
          titleCn: "房产",
          title: "ئۆي-مۈلۈك",
          id: 5,
        },
        {
          src: "/static/images/grid/车.png",
          titleCn: "车",
          title: "ماشىنا",
          id: 6,
        },
        {
          src: "/static/images/grid/出租房.png",
          titleCn: "出租房",
          title: "ئىجارە-ئۆي",
          id: 7,
        },
        {
          src: "/static/images/grid/买卖.png",
          titleCn: "买卖",
          title: "سودا-سېتىق",
          id: 8,
        },
        {
          src: "/static/images/grid/二手车.png",
          titleCn: "二手",
          title: "نىمكەش ماللا",
          id: 9,
        },
        {
          src: "/static/images/grid/农业.png",
          titleCn: "农业",
          title: "يېزا-ئىگىلىك",
          id: 10,
        },
        {
          src: "/static/images/grid/微商.png",
          titleCn: "微商",
          title: "ئۈندىدار سودىسى",
          id: 11,
        },
        {
          src: "/static/images/grid/牲畜.png",
          titleCn: "牲畜",
          title: "مال-چارۋا",
          id: 12,
        },
        {
          src: "/static/images/grid/家电.png",
          titleCn: "家电",
          title: "ئېلىكتىر سايمان",
          id: 13,
        },
        {
          src: "/static/images/grid/园地.png",
          titleCn: "园地",
          title: "باغ ئۇچۇرى",
          id: 14,
        },
        {
          src: "/static/images/grid/零工.png",
          titleCn: "零工",
          title: "ئىشچى",
          id: 15,
        },
      ],
      baseList1: [
        {
          src: "/static/images/grid/店铺转让.png",
          titleCn: "店铺转让",
          title: "دۇكان ئۆتكۈزۈش",
          id: 1,
        },
        {
          src: "/static/images/grid/店铺出租.png",
          titleCn: "店铺出租",
          title: "ئىجارە دۇكان",
          id: 2,
        },
        {
          src: "/static/images/grid/其他.png",
          titleCn: "其他",
          title: "باشقىلار",
          id: 3,
        },
      ],
      baseList2: [
        {
          src: "/static/images/grid/厨师.png",
          titleCn: "餐饮",
          title: "ئاشخانا ئىشلىرى",
          id: 1,
        },
        {
          src: "/static/images/grid/销售.png",
          titleCn: "销售",
          title: "مال ساتقۇچى",
          id: 2,
        },
        {
          src: "/static/images/grid/办公室.png",
          titleCn: "办公室职员",
          title: "ئىشخانا خادىمى",
          id: 3,
        },
        {
          src: "/static/images/grid/其他.png",
          titleCn: "其他",
          title: "باشقىلار",
          id: 0,
        },
      ],
      baseList4: [
        {
          src: "/static/images/grid/货车.png",
          titleCn: "拉运司机",
          title: "كىراكەش",
          id: 1,
        },
        {
          src: "/static/images/grid/修理工.png",
          titleCn: "修理工",
          title: "رېمونتچى",
          id: 2,
        },
        {
          src: "/static/images/grid/婚姻服务.png",
          titleCn: "婚礼服务",
          title: "توي مۇلازىمەت",
          id: 3,
        },
        {
          src: "/static/images/grid/装修.png",
          titleCn: "装修工",
          title: "بىزەكچى",
          id: 4,
        },
        {
          src: "/static/images/grid/保姆.png",
          titleCn: "保姆",
          title: "بالا باققۇچى ",
          id: 5,
        },
        {
          src: "/static/images/grid/清洁.png",
          titleCn: "清洁工",
          title: "تازلىق مۇلازىمىتى",
          id: 6,
        },
        {
          src: "/static/images/grid/交通.png",
          titleCn: "交通",
          title: "كىرا",
          id: 7,
        },
        {
          src: "/static/images/grid/其他.png",
          titleCn: "其他",
          title: "باشقىلار",
          id: 0,
        },
      ],
      baseList5: [
        {
          src: "/static/images/grid/楼房.png",
          titleCn: "楼房",
          title: "بىنا ئۆي",
          id: 1,
        },
        {
          src: "/static/images/grid/新楼房.png",
          titleCn: "新楼房",
          title: "يېڭى بىنا",
          id: 2,
        },
        {
          src: "/static/images/grid/平房.png",
          titleCn: "平房",
          title: "قورۇجاي",
          id: 3,
        },
        {
          src: "/static/images/grid/地产.png",
          titleCn: "地产",
          title: "جايلىق يەر",
          id: 4,
        },
      ],
      baseList6: [
        {
          src: "/static/images/grid/交通.png",
          titleCn: "小车",
          title: "تۇرمۇش ماشىنىسى",
          id: 1,
        },
        {
          src: "/static/images/grid/货车.png",
          titleCn: "货车",
          title: "يۈك ماشىنىسى",
          id: 2,
        },
        {
          src: "/static/images/grid/其他.png",
          titleCn: "其他",
          title: "باشقىلار",
          id: 3,
        },
      ],
      baseList7: [
        {
          src: "/static/images/grid/楼房.png",
          titleCn: "楼房",
          title: "بىنا ئۆي",
          id: 1,
        },
        {
          src: "/static/images/grid/平房.png",
          titleCn: "平房",
          title: "قورۇجاي",
          id: 3,
        },
      ],
      baseList8: [
        {
          src: "/static/images/grid/餐饮.png",
          titleCn: "餐饮",
          title: "يىمەك-ئىچمەك",
          id: 1,
        },
        {
          src: "/static/images/grid/服装.png",
          titleCn: "服装",
          title: "كىيىم-كېچەك",
          id: 2,
        },
        {
          src: "/static/images/grid/日用品.png",
          titleCn: "日用品",
          title: "تۇرمۇش بۇيۇملىرى",
          id: 3,
        },
        {
          src: "/static/images/grid/其他.png",
          titleCn: "其他",
          title: "باشقىلار",
          id: 0,
        },
      ],
      baseList9: [
        {
          src: "/static/images/grid/摩托车.png",
          titleCn: "摩托车",
          title: "موتوسىكىلىت",
          id: 1,
        },
        {
          src: "/static/images/grid/电动车.png",
          titleCn: "电动车",
          title: "توكسىكىلىت",
          id: 2,
        },
        {
          src: "/static/images/grid/其他.png",
          titleCn: "其他",
          title: "باشقىلار",
          id: 3,
        },
      ],
      baseList10: [
        {
          src: "/static/images/grid/农具.png",
          titleCn: "农具",
          title: "دېھقانچىلىق ئەسۋابلىرى",
          id: 1,
        },
        {
          src: "/static/images/grid/土地.png",
          titleCn: "土地转让",
          title: "يەر ھۆددىگە بېرىش",
          id: 2,
        },
      ],
      baseList12: [
        {
          src: "/static/images/grid/牧畜.png",
          titleCn: "牧畜",
          title: "چارۋا-مال",
          id: 1,
        },
        {
          src: "/static/images/grid/家禽.png",
          titleCn: "家禽",
          title: "ئۆي قۇشى",
          id: 2,
        },
        {
          src: "/static/images/grid/饲料.png",
          titleCn: "饲料",
          title: "يەم-خەشەك",
          id: 3,
        },
      ],
    };
  },
  onLoad() {},
  onShow() {},
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },
  onReachBottom() {},
  methods: {
    clickGrid(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.show1 = true;
          this.id = 1;
          break;
        case 1:
          this.show2 = true;
          this.id = 2;
          break;
        case 2:
          this.id = 3;
          this.subid = null;
          uni.navigateTo({
            url: `/pages/uqur/yollax?id=3&subid=null`,
          });

          break;
        case 3:
          this.show4 = true;
          this.id = 4;
          break;
        case 4:
          this.show5 = true;
          this.id = 5;
          break;
        case 5:
          this.show6 = true;
          this.id = 6;
          break;
        case 6:
          this.show7 = true;
          this.id = 7;
          break;
        case 7:
          this.show8 = true;
          this.id = 8;
          break;
        case 8:
          this.show9 = true;
          this.id = 9;
          break;
        case 9:
          this.show10 = true;
          this.id = 10;
          break;
        case 10:
          this.id = 11;
          this.subid = null;
          uni.navigateTo({
            url: `/pages/uqur/yollax?id= 11 & subid = null`,
          });
          break;
        case 11:
          this.show12 = true;
          this.id = 12;
          break;
        case 12:
          this.id = 13;
          this.subid = null;
          uni.navigateTo({
            url: `/pages/uqur/yollax?id= 13 & subid = null`,
          });
          break;
        case 13:
          this.id = 14;
          this.subid = null;
          uni.navigateTo({
            url: `/pages/uqur/yollax?id= 14 & subid = null`,
          });
          break;
        case 14:
          this.id = 15;
          this.subid = null;
          uni.navigateTo({
            url: `/pages/uqur/yollax?id= 15 & subid = null`,
          });
          break;
      }
    },
    clickGrid1(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;

          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
      }
      this.navigat();
    },
    clickGrid2(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
        case 3:
          this.subid = 4;
          break;
      }
      this.navigat();
    },
    clickGrid4(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
        case 3:
          this.subid = 4;
          break;
        case 4:
          this.subid = 5;
          break;
        case 5:
          this.subid = 6;
          break;
        case 6:
          this.subid = 7;
          break;
        case 7:
          this.subid = 8;
          break;
      }
      this.navigat();
    },
    clickGrid5(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
        case 3:
          this.subid = 4;
          break;
      }
      this.navigat();
    },
    clickGrid6(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
        case 3:
          this.subid = 4;
          break;
      }
      this.navigat();
    },
    clickGrid7(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
      }
      this.navigat();
    },
    clickGrid8(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
        case 3:
          this.subid = 4;
          break;
      }
      this.navigat();
    },
    clickGrid9(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
      }
      this.navigat();
    },
    clickGrid10(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
      }
      this.navigat();
    },
    clickGrid12(e) {
      console.log(e);
      switch (e) {
        case 0:
          this.subid = 1;
          break;
        case 1:
          this.subid = 2;
          break;
        case 2:
          this.subid = 3;
          break;
      }
      this.navigat();
    },
    close() {
      for (let i = 1; i <= 12; i++) {
        this[`show${i}`] = false;
      }
    },
    navigat() {
      uni.navigateTo({
        url: `/pages/uqur/yollax?id=${this.id}&subid=${this.subid}`,
      });
    },
  },
};
</script>
<style lang="scss">
.grid-text {
  font-size: 12px;
  color: #000;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}
.grid {
  padding-top: 25rpx;
  background: #fff;
  border-radius: 25rpx;
  margin: auto;
  box-shadow: 0px 0px 20px 1px #cccccc47;
}
.u-border-bottom {
  border-color: #dadbde70 !important;
}
.u-border-right {
  border-color: #dadbde70 !important;
}
.toast {
  height: 40px;
  border-radius: 10rpx 10rpx 0 0;
  background: #dadbde70;
  color: #ccc;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab {
  padding: 10rpx;
  width: 85vw;
  background: #fff;
  border-radius: 25rpx;
  box-shadow: 0px 0px 20px 1px #cccccc47;
}
</style>